<template>
  <div class="view-container">
    <div v-if="knowledgeGraphMode === 'preview'" class="preview-view">
      <knowledge-preview />
    </div>
    <div v-else class="knowledge-graph">
      <graph-vis-panel
        :graph-vis-width="graphVisWidth"
        class="graph-visualization"
        :style="{ width: `${graphVisWidth}px` }"
      >
        <!-- 关系图谱可视化code here -->
      </graph-vis-panel>
      <div id="graph-panel-resize-line" class="graph-panel-resize-line"></div>
      <graph-sys-panel
        :vis-width="graphVisWidth"
        class="graph-system"
        :style="{ width: `calc(100% - ${graphVisWidth}px)` }"
      >
        <!-- 构建系统code here -->
      </graph-sys-panel>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import KGraphStore from '@/store/modules/k-graph'
import GraphSysPanel from '@/components/knowledge-graph/GraphSysPanel.vue'
import GraphVisPanel from '@/components/knowledge-graph/GraphVisPanel.vue'
import KnowledgePreview from '@/views/studio/KnowledgePreview.vue'

@Component({
  components: {
    GraphSysPanel,
    GraphVisPanel,
    KnowledgePreview,
  },
})
export default class KnowledgeView extends Vue {
  private minWidth = 240 // 最小宽度
  private maxWidth = 1136 // 最大宽度
  public graphVisWidth = 700 // 当前宽度

  // public get knowledgeGraphMode(): string {
  //   return KGraphStore.knowledgeGraphMode
  // }

  private knowledgeGraphMode: string = 'edit'

  beforeDestroy() {
    this.destroyEventBus()
  }

  initEventBus() {
    // @ts-ignore
    this.$parentEventBus.$on('kg-app-view-mode', this.onKgViewchange)
  }

  destroyEventBus() {
    // @ts-ignore
    this.$parentEventBus.$off('kg-app-view-mode', this.onKgViewchange)
  }

  onKgViewchange(data: string) {
    console.log('test', data)
    this.knowledgeGraphMode = data
    // 从预览返回编辑态，地图上点击某个实体失效，是因为地图那边读取到的knowledgeGraphMode还是preview，这里更新到store里，那边可以知道状态
    KGraphStore.changeVisualizationMode(data)
  }

  public get visCollapsed() {
    return KGraphStore.graphVisCollapsed
  }

  public get sysCollapsed() {
    return KGraphStore.graphSysCollapsed
  }

  mounted() {
    KGraphStore.setProjectId(Number(this.$route.params.id))
    this.initViewEvent()
    this.initEventBus()
    // console.log(this.$root.microStore.state.KGraphStore, '------')
    // @ts-ignore
    KGraphStore.setLock(this.$root.parentVuex.state.DataViewStore._lock)
    //  UserStore.currentUser?.id
    KGraphStore.setUserId(
      // @ts-ignore
      this.$root.parentVuex.state.UserStore._currentUser?.id
    )

    KGraphStore.setUserRoleId(
      // @ts-ignore
      this.$root.parentVuex.state.UserStore._userRole.id
    )
  }

  //  初始化resize 事件
  public initViewEvent() {
    const resizeBar = document.querySelector('#graph-panel-resize-line') as any

    // 鼠标按下事件
    const mouseDownEvent = ($event: any) => {
      const graphBox = document.querySelector('.knowledge-graph') as HTMLElement
      const remainWidth = graphBox.clientWidth - this.minWidth
      //  图谱可视化区域 最大可调整宽度
      const maxWidth = remainWidth > this.maxWidth ? this.maxWidth : remainWidth

      const initCurrentWidth = this.graphVisWidth
      const startX = $event.clientX
      const mouseMoveEvent: any = (event: any) => {
        const endX = event.clientX
        const moveLength = endX - startX
        let newWidth = initCurrentWidth + moveLength
        if (newWidth > maxWidth) {
          newWidth = maxWidth
        } else if (newWidth < this.minWidth) {
          newWidth = this.minWidth
        }
        this.graphVisWidth = newWidth

        // 如果最小宽度小于316，则折叠
        if (!this.visCollapsed && this.graphVisWidth < 316) {
          KGraphStore.setGraphVisCollapsed(true)
        } else if (this.visCollapsed && this.graphVisWidth >= 316) {
          KGraphStore.setGraphVisCollapsed(false)
        }

        const sysWidth = graphBox.clientWidth - this.graphVisWidth

        if (!this.sysCollapsed && sysWidth < 316) {
          KGraphStore.setGraphSysCollapsed(true)
        } else if (this.sysCollapsed && sysWidth >= 316) {
          KGraphStore.setGraphSysCollapsed(false)
        }
        this.$forceUpdate()
      }

      document.addEventListener('mousemove', mouseMoveEvent)
      const mouseUpEvent: any = () => {
        document.removeEventListener('mousemove', mouseMoveEvent)
        document.removeEventListener('mouseup', mouseUpEvent)
        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
        resizeBar.releaseCapture && resizeBar.releaseCapture()
      }
      document.addEventListener('mouseup', mouseUpEvent)
      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
      resizeBar.setCapture && resizeBar.setCapture()
      return false
    }

    resizeBar.addEventListener('mousedown', mouseDownEvent)
    this.$once('hook:beforeDestroy', () => {
      resizeBar.removeEventListener('mousedown', mouseDownEvent)
    })
  }
}
</script>

<style lang="less" scoped>
.view-container {
  height: 100%;
}

.knowledge-graph {
  display: flex;
  flex-direction: row;
  height: 100%;

  .graph-visualization {
    border-right: 1px solid #e8e8e8;
    height: 100%;
  }

  .graph-panel-resize-line {
    background-color: transparent;
    cursor: col-resize;
    height: 100%;
    width: 5px;
  }

  // .graph-system {
  //   // height: 100%;
  // }
}
</style>
